<template>
	<view>
		<uni-section :title="`您有${unRead}条未读信息`" type="line">
			<view v-for="(v,i) in msg_list" :key="i">
				<uni-card @click="doRead(v)" :title="'来自:'+v.sender_name"
					:extra="dayjs(v.create_time).format('YYYY-MM-DD HH:mm:ss')">
					<view class="plan_list_text">
						{{v.content}}
					</view>
					<view style="text-align: right;">
						{{v.is_read == 1 ? "(已读)" : "(未读)"}}
					</view>
				</uni-card>
			</view>

		</uni-section>
		<uni-pagination :show-icon="true" :total="total" :current="page" @change="changePage" />
	</view>
</template>

<script>
	import msgApi from "@/api/msgApi.js";
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				msg_list: [],
				total: 0,
				unRead: 0,
				dayjs: dayjs,
			}
		},
		onLoad() {
			this.countOwnUnReadMsg();
			this.listOwnMsg();
		},
		methods: {
			async changePage(e){
				this.page = e.current;
				await this.listOwnMsg();
			},
			async doRead(v) {
				if (v.is_read == 0) {
					let res = await msgApi.doReadMsg(v.id);
					if (res.code == 0) {
						v.is_read = 1;
						this.unRead -= 1;
					}
				}
			},
			async countOwnUnReadMsg() {
				let res = await msgApi.countOwnUnReadMsg();
				this.unRead = res.data;
			},
			async listOwnMsg() {
				let param = {
					page: this.page,
					limit: this.limit
				};
				let res = await msgApi.listOwnMsg(param);
				this.msg_list = [...res.data];
				this.total = res.count;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-ALIPAY */
	.uni-badge {
		margin-left: 20rpx;
	}

	/* #endif */
	.example-body {
		flex-direction: row;
		justify-content: flex-start;
	}

	.uni-badge-left-margin {
		margin-left: 10px;
	}

	.uni-badge-absolute {
		margin-left: 40px;
	}

	.plan_list_text {
		display: inline-block;
		width: 100%;
		height: auto;
		font-family: Gibson;
		font-size: 32rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: pre-wrap;
		border-bottom: 1px solid lightblue;
	}
</style>